<template>
  <div :class="'van-after-border ' + item.class">
    <!--  -->
    <van-field ref="inputDom" v-model="item.text" :readonly="true" clickable :disabled="item.disabled" :required="item.disabled ? false : item.required" :placeholder="placeholder" :data-rule="item.key" :error-message="errMsg" :rules="item.rules" @click="_click">
      <template #label>
        <span class="custom-title">{{ label }}
          <van-icon v-if="help" name="question" @click="showHelp" />
        </span>
      </template>
      <template #right-icon>
        <div class="iconfont">
          &#xe600;
        </div>
      </template>
    </van-field>
    <van-popup v-model="showPicker" position="bottom">
      <van-cascader v-model="item.value" :title="text" active-color="#1989fa" :options="item.dropList" :field-names="fieldNames" @close="showPicker = false" @finish="onConfirm" />
    </van-popup>
  </div>
</template>
<script>
// 支持t v 或者 label value
import EleBase from './EleBase'
// import { homeApi } from '@/api/home.js'
import { Toast } from 'vant'
// import { toJson } from '@/utils/d-form'

export default {
  name: 'EleCascader',
  extends: EleBase,
  props: {
    item: {
      type: Object, // 类型
      default: null // 默认值
    }
  },
  data() {
    return {
      refProp: this.$props.item,
      selectedIndex: 0,
      showPicker: false,
      text: '',
      fieldNames: {
        text: 'label',
        value: 'value',
        children: 'children'
      },
      columns: []
    }
  },
  computed: {
    errMsg() {
      let str = ''
      if (this.$validate.isNull(this.item.value) && this.item.required) {
        if (this.item.undermsg === '') {
          str = '请选择' + this.item.label
        } else {
          str = this.item.undermsg
        }
      }
      return str
    },
    placeholder() {
      let str = ''
      if (this.item.placeholder) {
        str = this.item.placeholder
      } else if (this.item.label) {
        str = '请选择' + this.item.label
      }
      return str
    }
  },
  mounted() {
    this.text = '请选择' + this.item.label
    /* const $this = this
    // console.log(this.initValue)
     if (this.initValue && typeof this.initValue === 'string') {
      // debugger
      this.initValue = []
      homeApi.simple(this.item.editFormat, {}).then(res => {
        // console.log('save,', res)
        if (res.code === 200) {
          res.data.forEach((val, index) => {
            const item = {}
            item.label = val.label
            item.value = val.value
            item.options = val
            this.initValue.push(item)
            this.columns.push(item.label || item.t)
            if (val.id === $this.$props.item.value) {
              $this.selectedIndex = index
              $this.$props.item.text = item.label
              $this.text = item.label
            }
          })
        } else {
          throw new Error(JSON.stringify(res))
        }
      }).catch(err => {
        console.error(err)
      })

      // const url = window.g.WEBAPI_HOST_URL + 'api/DataProvider/ddl/simple'
      // request.post(url, this.item.editFormat).then(res => {

      // })
    } else {
      this.initValue.forEach((item, index) => {
        this.columns.push(item.label || item.t)
        // debugger
        if ($this.$props.item.value !== '') { // ($this.$props.item.value ? false : true)
          if (item.s) {
            $this.selectedIndex = index
            $this.$props.item.value = item.value
            $this.$props.item.text = item.label
            $this.text = item.label
          }
        } else {
          if (item.v === $this.$props.item.value) {
            $this.selectedIndex = index
            $this.$props.item.text = item.label
            $this.text = item.label
          }
        }
      })
    }*/
  },
  methods: {
    _click() {
      if (this.$props.item.disabled || this.$props.item.readonly) {
        Toast.fail('此为只读项，不可修改！')
      } else {
        this.showPicker = !this.showPicker
      }
    },
    onConfirm(o) {
      if (this.$props.item.disabled || this.$props.item.readonly) {
        // alert("此为不可编辑啊项！")
        // return;
      }
      debugger
      this.item.value = o.value
      this.item.text = o.selectedOptions.map((option) => option.label).join('/')
      // item.value = inputDom.value = '01123-xcs'
      // this.$props.item.value = '01123-xcs'

      this.$nextTick(() => {
        this.showPicker = false

        this.$props.item.value = this.item.value
        this.$props.item.text = this.item.text

        //
        var expression = this.$props.item.expression
        if (expression) {
          this.expressionProc(expression)
        }
      })

      // var expr = { c: '已婚', act: 'changeRequired("A0111", true)' }
      // {"exp":{"d":"changeRequired('A0111', false)", "m":[{"c":"已婚","t":"changeRequired('A0111', true)"}]}}
      /* var expression = this.$props.item.expression
      if (expression) {
        var act = 'this.' + expression.d
        for (var i = 0; i < expression.m.length; i++) {
          if (expression.m[i].c === item.value) {
            act = 'this.' + expression.m[i].t
            break
          }
        }
        debugger
        eval(act)
      } */
    },
    onCancel() {
      this.showPicker = false
    },
    changeRequired(key, value) {
      debugger
      this.$emit('onChangeOtherRequired', { 'key': key, 'value': value })
    },
    expressionProc(value) {
      debugger
      this.$emit('onExpressionProc', value)
    }
  }
}
</script>
